<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <!-- 引入样式-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/shopping.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <!--该页面需要登录的权限认证-->
    <script src="js/auth.js"></script>

    <script>
        /*
        $(function () {

            //设置加减按钮
            var val = $("#goods-num").val();
            $("#subBtn").click(function () {
                //减法
                if (val != null && !isNaN(val) && val > 0) {
                    val--;
                    $("#goods-num").val(val);
                }
            });
            $("#sumBtn").click(function () {
                if (val != null && !isNaN(val)) {
                    val++;
                    $("#goods-num").val(val);
                }
            });
            //结算按钮
            $("#buyBtn").click(function () {
                window.location.href = "buy.html";
            });
        });

        //数量输入事件
        function inputNum(obj) {
            var val = obj.value;
            if (isNaN(val)) {
                obj.value = '';
            }
            if (!isNaN(val) && val < 0) {
                obj.value = abs(val);
            }
        }

        //全选按钮事件
        function allCheck(obj) {
            var cb = document.getElementsByClassName("checkBox");
            if (obj.checked) {
                for (var i = 0; i < cb.length; i++) {
                    cb[i].checked = true;
                }
            } else {
                for (var i = 0; i < cb.length; i++) {
                    cb[i].checked = false;
                }
            }
        }*/

    </script>
</head>

<body>
<!-- 引入头部 -->
<div>
    <iframe src="header.html" id="headerFrame" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>

<div id="app">
    <!--购物车订单-->
    <div class="layui-container" style="top:-30px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>购物车</legend>
                </fieldset>

                <table class="layui-table my-shopping-table" lay-skin="line">
                    <colgroup>
                        <col width="160">
                        <col width="">
                        <col width="100">
                        <col width="150">
                        <col width="100">
                        <col width="80">
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="font-weight: bold;">
                            <input class="checkBox" type="checkbox" v-model="isAllChecked" @click="allChecked"/> 全选
                        </th>
                        <th style="font-weight: bold;">
                            商品信息
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            单价
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            数量
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            合计
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(good,index) in cart.goodsList" :key="good.id">
                        <td>
                            <input class="checkBox" v-model="good.isChecked" :checked="good.isChecked" type="checkbox"/>
                            <a href="">
                                <img :src="good.pic" width="80px"/>
                            </a>
                        </td>
                        <td>
                            <a href="">
                                {{good.name}}
                            </a>
                        </td>
                        <td align="center">
                            <span>￥{{good.price}}</span>
                        </td>
                        <td align="center">
                            <button id="subBtn" @click="subNum(index)">-</button>
                            <input id="goods-num" type="text" :value="good.buyNum" v-model="good.buyNum" readonly
                                   oninput="inputNum(this)"/>
                            <button id="sumBtn" @click="addNum(index)">+</button>
                        </td>
                        <td align="center">
                            <span>￥{{good.buyNum* good.price}}</span>
                        </td>
                        <td align="center">
                            <a href="javascript:void(0);" @click="removeItemFromCart(index)">删除</a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--购物车订单end-->

    <!--结算部分-->
    <div class="layui-container" style="top: -20px;">
        <div class="layui-row  my-shopping-buy">
            <div class="layui-col-md12">
                <div class="my-buyCheck">
                    <input class="checkBox" type="checkbox" v-model="isAllChecked" @click="allChecked"/> 全选
                    <a href="javascript:void(0);" @click="deleteCheckedItems">
                        <i class="layui-icon layui-icon-delete"></i>
                        删除选中
                    </a>
                </div>
                <div class="my-buyBtn">
                    总价：
                    <font style="font-size: 20px;font-weight: bold;color: red;">￥{{cartTotalPrice}}</font>
                    <button id="buyBtn" @click="goToBuyCart">去结算</button>
                </div>
            </div>

        </div>
    </div>
    <!--结算部分end-->
</div>
<!--引入底部-->
<div class="my-footer">
    <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
</div>
<!--引入底部end-->

<script src="js/include/libs.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            currentLoginSuccessUser: {},
            cart: {},
            isAllChecked: false
        },
        computed: {
            cartTotalPrice: function () {
                let total = 0.0;
                for (let i = 0; i < this.cart.goodsList.length; i++) {
                    let obj = this.cart.goodsList[i];
                    total += obj.price * obj.buyNum;
                }
                return total.toFixed(2); //小数点后精确到两位
            }
        },
        mounted() {
            this.currentLoginSuccessUser = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
            console.log("=====当前登录成功的用户信息如下====")
            console.log(this.currentLoginSuccessUser);
            //尝试从localStorage取出cart对象；
            this.cart = JSON.parse(localStorage.getItem("cart.xiaomimall_" + this.currentLoginSuccessUser.uid));
            console.log("-----当前页面的购物车对象信息如下：------");
            console.log(this.cart);

            for(let i=0;i<this.cart.goodsList.length;i++){
                //默认每个商品都没有被选中；
                //this.goodsCheckedList.push(false);
                let obj = this.cart.goodsList[i];
                obj.isChecked = false;
            }

            //this.$forceUpdate();

        },
        methods: {
            subNum(index) {
                if (this.cart.goodsList[index].buyNum > 1) {
                    this.cart.goodsList[index].buyNum--;
                    this.reSaveCartToLocalStorage();
                }
            },
            addNum(index) {
                if (this.cart.goodsList[index].buyNum < 100) {
                    this.cart.goodsList[index].buyNum++;
                    this.reSaveCartToLocalStorage();
                }
            },

            removeItemFromCart(index) {
                this.$confirm('确认要删除该商品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warn'
                }).then(() => {
                    this.cart.goodsList.splice(index, 1);
                    this.reSaveCartToLocalStorage();


                }).catch(() => {

                });


            },

            reSaveCartToLocalStorage() {
                //局部刷新帧；
                //局部去刷新帧；
                let iframe = document.getElementById("headerFrame");
                iframe.src = iframe.src;
                localStorage.setItem("cart.xiaomimall_" + this.currentLoginSuccessUser.uid, JSON.stringify(this.cart));
            },

            allChecked(){
                console.log('您点击了全选....')
                for(let i=0;this.cart.goodsList.length;i++){
                    //this.cart.goodsList[i].isChecked = !this.isAllChecked;
                    let obj = this.cart.goodsList[i];
                    obj.isChecked = !this.isAllChecked;
                }
            },
            deleteCheckedItems(){
                for(let i=this.cart.goodsList.length-1;i>=0;i--){
                    let obj = this.cart.goodsList[i];
                    if(obj.isChecked){
                        //this.removeItemFromCart(i);
                        this.cart.goodsList.splice(i, 1);
                    }
                }

                this.reSaveCartToLocalStorage();

            },

            goToBuyCart(){
                //判断购物车金额是否为零。
                //如果购物车是空不能结算。
                if(this.cart.goodsList.length===0){
                    this.$message({
                        message: '购物车是空的，亲，赶紧购买商品吧~',
                        type: 'error'
                    })
                    return;
                }
                window.location.href= 'buyCart.html';
            }

        }
    })
</script>
</body>

</html>